<template>
  <div>
    <!-- 顶部标题 -->
    <div class="Top" style="display: flex; justify-content: center;">
      <h3>数据处理中台</h3>
    </div>
    <!-- 查询模块 -->
    <div style="display: flex; justify-content: right; margin: 30px 0;">
      <el-form :inline="true" :data="searchList" class="demo-form-inline">
        <el-form-item label="用户编号">
          <el-input v-model="searchList.id" placeholder="请输入用户ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增区域 -->

    <div>
      <el-row>
        <el-button @click="addDialog" type="primary" round class="btn">添加角色</el-button>
      </el-row>
    </div>

    <div class="container">
      <el-row>
        <div class="center-button">
          <el-button @click="addAddres" type="primary" round class="btn">新增地址</el-button>
        </div>
      </el-row>
    </div>


    <!-- 表格区域 -->
    <div>
      <el-table :data="tableList" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="180">
        </el-table-column>
        <el-table-column prop="address" label="常用地址">
          <template v-slot="{ row }">
            <div v-for="(item, index) in row.address" :key="index">
              {{ item.province + item.city + item.district + item.detail }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button size="mini" @click="amendList(row)">修改</el-button>
            <el-button size="mini" type="danger" @click="delList(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增区域 -->
    <div>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
        <el-form :rules="dialogRules" :model="dialogList" ref="dialogRules" label-width="90px">
          <el-form-item label="编号:" prop="id">
            <el-input v-model="dialogList.id" placeholder="用户编号" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="dialogList.name" placeholder="请输入用户姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别:" prop="gender">
            <el-select v-model="dialogList.gender">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话:" prop="phone">
            <el-input v-model="dialogList.phone" placeholder="请输入电话号码"></el-input>
          </el-form-item>
          <el-form-item label="常用地址:" prop="usualAddress">
            <el-input v-model="dialogList.province" placeholder="请输入省/自治区地址"></el-input>
            <el-input v-model="dialogList.city" placeholder="请输入市级名称"></el-input>
            <el-input v-model="dialogList.district" placeholder="请输入区/县名称"></el-input>
            <el-input v-model="dialogList.detail" placeholder="请输入县级详细地址"></el-input>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 新增地址 -->
    <div>
      <el-dialog :title="title2" :visible.sync="dialogVisible2" width="30%">
        <el-form :rules="dialogRules2" :model="addresList" ref="dialogRules2" label-width="90px">

          <el-form :model="addresList" label-width="80px">
            <el-form-item label="姓名:" prop="userId">
              <el-select v-model="addresList.userId" placeholder="请选择用户姓名">
                <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <el-form-item label="常用地址:" prop="usualAddress">
            <el-input v-model="addresList.province" placeholder="请输入省/自治区地址"></el-input>
            <el-input v-model="addresList.city" placeholder="请输入市级名称"></el-input>
            <el-input v-model="addresList.district" placeholder="请输入区/县名称"></el-input>
            <el-input v-model="addresList.detail" placeholder="请输入县级详细地址"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="addAddresList">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 编辑弹框区域 -->
    <div>
      <el-dialog :title="title" :visible.sync="dialogVisible1" width="30%">
        <el-form :rules="dialogRules" :model="editList" ref="dialogRules" label-width="90px">
          <el-form-item label="编号:" prop="id">
            <el-input v-model="editList.id" placeholder="用户编号" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="editList.name" placeholder="请输入用户姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别:" prop="gender">
            <el-select v-model="editList.gender">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话:" prop="phone">
            <el-input v-model="editList.phone" placeholder="请输入电话号码"></el-input>
          </el-form-item>
          <el-form-item label="常用地址:" prop="usualAddress" v-for="(item, index) in editList.address" :key="index">
            <el-input v-model="item.province" placeholder="请输入省/自治区地址"></el-input>
            <el-input v-model="item.city" placeholder="请输入市级名称"></el-input>
            <el-input v-model="item.district" placeholder="请输入区/县名称"></el-input>
            <el-input v-model="item.detail" placeholder="请输入县级详细地址"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="editUser">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
//引入自定义的方法，用于调用后端接口
import { getList, getUserById, addLink, delLink, updateLink, addAddresList, getUserList } from '@/api/index'

export default {
  name: 'yH',
  data() {
    return {
      acquiescentId: 2,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      //搜索区域
      searchList: { id: '' },
      userList: [],
      //表格区域
      tableList: [
        {
          id: 1,
          name: "",
          gender: "",
          phone: "",
          address: [
            {
              province: "",
              city: "",
              district: "",
              detail: ""
            }
          ]
        },
      ],
      title: '新增用户',
      title2: '新增地址',
      // 回显数据的数组
      chun: {},
      //新增/修改弹框区域
      dialogList: {
        id: '',
        name: '',
        gender: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        detail: '',
      },
      editList: {
        id: 0,
        name: "",
        gender: "",
        phone: "",
        address: [{
          province: "",
          city: "",
          district: "",
          detail: "",
        }]
      },//新增地址
      addresList: {
        id: '',
        userId: '',
        name: '',
        province: '',
        city: '',
        district: '',
        detail: '',
      },

      dialogListId: 0,
      dialogRules: {
        name: [
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
        ],

      },

      dialogRules2: {
        name: [
          { required: true, message: '请选择用户', trigger: 'change' }
        ],
        province: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        city: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        district: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        detail: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],

      }

    }
  },
  created() {//生命周期钩子函数，用于获取页面初始化数据
    this.getList()
    this.getUserList()
  },
  methods: {//调用封装好的js方法
    async getList() {
      await getList()
        .then(response => {//通过后端响应的状态码
          if (response.data.code === 1) {
            this.tableList = response.data.data;
          }
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
        });
    },
    async search() {
      // 根据id查询用户信息及地址
      await getUserById(this.searchList.id)
        .then(response => {//通过后端响应的状态码
          if (response.data.code === 1) {
            this.tableList = response.data.data;
          } else if (response.data.code === 0) {
            alert(response.data.msg);
            console.error(response.data.msg);   
          }
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
         
        });
    },

    async delList(id) {
      await delLink(id)
      //删除成功后重新调用查询方法展示信息
      await this.getList()
    },
    addDialog() {
      this.title = '新增用户'
      this.dialogList = {}
      this.dialogVisible = true

    },
    addUser() {
      if (this.title == '新增用户') {
        this.$refs.dialogRules.validate(async (valid) => {
          if (valid) {
            await addLink(this.dialogList)
            this.dialogVisible = false
            await this.getList()
          }
        });
      }
    },
    amendList(row) {
      this.title = '修改用户',
        this.chun = row.address.map(item => {
          console.log(item.city);
          return item.city
        })
      console.log(this.chun);
      this.editList = row

      console.log(6666, this.editList);
      this.dialogVisible1 = true
    },
    editUser() {
      if (this.title == '修改用户') {
        //调用修改接口
        this.$refs.dialogRules.validate(async (valid) => {
          if (valid) {
            // 调用修改接口
            await updateLink(this.editList)
            this.dialogVisible1 = false
            this.getList()
          }
        });
      }
    },
    async addAddres() {
      this.title2 = '新增地址'
      this.addresList = {}
      this.dialogVisible2 = true
      this.getUserList()
    },
    //新增用户地址
    addAddresList() {

      if (this.title2 == '新增地址') {
        this.$refs.dialogRules2.validate(async (valid) => {
          if (valid) {
            await addAddresList(this.addresList)
            this.dialogVisible2 = false
            this.getList()
          }
        });
      }
    },
    //查询全部用户信息
    async getUserList() {
      await getUserList()
        .then(response => {//通过后端响应的状态码
          if (response.data.code === 1) {
            this.userList = response.data.data;
          }
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
        });
    }
  },
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
}

.center-button {
  margin: 0 auto;
}
</style>